<template>
  <div class="account-security">
    <unify-header></unify-header>
    <div class="container" ref="container">
      <div class="wrapper">
        <div class="main">
          <h2 class="title">账户安全
            <small>完善账户安全信息，更好的保护您的数据安全！</small>
          </h2>
          <div class="phone-wrapper">
            <div class="panel">
              <strong class="phone">{{userInfo.mobile || userInfo.nickname}}<em v-show="userInfo.mobile">（您已经是绑定帐号）</em></strong>
            </div>
          </div>
          <div class="set-password-wrapper" v-if="userInfo.mobile">
            <div class="panel">
              <label class="label">登录密码</label>
              <span class="value">已设置</span>
              <button class="btn" @click="setPasswordDialogVisible=true">修改</button>
            </div>
          </div>
          <div class="set-phone-wrapper">
            <div class="panel">
              <label class="label">绑定手机号</label>
              <span class="value">{{userInfo.phonePrivacy || '无'}}</span>
              <button class="btn" v-if="false">修改</button>
            </div>
          </div>
        </div>
        <left-menu selected="security"></left-menu>
      </div>
    </div>
    <unify-footer></unify-footer>
    <el-dialog
      class="set-password-dialog"
      title="设置密码"
      :visible.sync="setPasswordDialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form ref="setPasswordFormRules" :rules="setPasswordFormRules" :model="setPasswordForm" label-width="80px">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input type="password" v-model="setPasswordForm.oldPassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input type="password" v-model="setPasswordForm.newPassword"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="affirmPassword">
          <el-input type="password" v-model="setPasswordForm.affirmPassword"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="savePassword">保存设置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import UnifyHeader from '../../components/header/header.vue'
  import UnifyFooter from '../../components/footer/footer.vue'
  import LeftMenu from '../../components/center/menu.vue'
  import * as UserAPi from '@/api/user'


  export default {
    data: function () {
      let passwordRules = (label) => {
        return [
          {required: true, message: '请输入' + label, trigger: 'blur'},
          {min: 6, max: 50, message: '长度在 6 到 50 个字符', trigger: 'blur'}
        ]
      }
      let affirmPasswordVal = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.setPasswordForm.newPassword) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }

      return {
        userDbId: '',
        userInfo: {},
        setPasswordForm: {
          oldPassword: '',
          newPassword: '',
          affirmPassword: ''
        },
        setPasswordFormRules: Object.assign({
          oldPassword: passwordRules('原密码'),
          newPassword: passwordRules('新密码'),
          affirmPassword: [
            {required: true, validator: affirmPasswordVal, trigger: 'blur'}
          ]
        }, {}),
        setPasswordDialogVisible: false
      }
    },
    methods: {
      savePassword: function () {
        this.$refs.setPasswordFormRules.validate((valid) => {
          if (!valid) {
            return false
          }
          this._modifyPwd()
        })
      },
      _getUserInfo: function () {
        UserAPi.userInfo({
          passId: this.userDbId
        }).then(res => {
          if (!res) {
            return
          }
          if (res.status === 'OK') {
            this.userInfo = Object.assign({
              phonePrivacy: res.data.mobile ? res.data.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : ''
            }, res.data)
          }
        })
      },
      _modifyPwd: function () {
        UserAPi.modifyPwd({
          utoken: this.userDbId,
          oldPwd: this.setPasswordForm.oldPassword,
          pwd: this.setPasswordForm.newPassword
        }).then((res) => {
          this.setPasswordDialogVisible = res.status !== 'OK'
          if (this.setPasswordDialogVisible) {
            this.$message({
              showClose: true,
              iconClass: 'atrup_Message',
              message: res.message,
              type: 'success'
            })
          }
        })
      }
    },
    watch: {},
    mounted: function () {
      this.setMinHeight(this.$refs.container, document.body.clientHeight - 50 - 132)
    },
    created: function () {
      this.userDbId = localStorage['userDbId']
      this._getUserInfo()
      console.log(this.userDbId)
    },
    components: {
      UnifyHeader,
      UnifyFooter,
      LeftMenu
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/sass">

  .account-security {
    .wrapper {
      width: 1152px;
      margin: 0 auto;
      overflow: hidden;
    }
    .container {
      padding: 14px 0 92px;
      background: #f1f1f1;
    }
    .main {
      position: relative;
      width: 960px;
      min-height: 668px;
      float: right;
      border-radius: 5px;
      border: 1px solid #dedede;
      background: #fff;
      h2.title {
        padding-left: 30px;
        font-size: 16px;
        line-height: 55px;
        border-bottom: 1px solid #dedede;
        small {
          padding-left: 2em;
          color: #999;
          font-size: 12px;
        }
      }
      .phone-wrapper, .set-password-wrapper, .set-phone-wrapper {
        padding: 0 5%;
        .panel {
          color: #303030;
          padding: 0 2em;
          border-bottom: 1px solid #dedede;
        }
        .label {
          line-height: 120px;
          font-size: 18px;
          font-weight: normal;
        }
        .value {
          margin-left: 1em;
          font-size: 16px;
        }
        .btn {
          float: right;
          margin-top: 34px;
          width: 120px;
          height: 50px;
          border-radius: 5px;
          background: #fff;
          outline: 0;
        }
      }
      .phone {
        font-weight: normal;
        font-size: 16px;
        line-height: 120px;
        em {
          font-size: 12px;
          font-style: normal;
          color: #999;
        }
      }
    }
    .set-password-dialog .el-dialog--small {
      width: 555px;
    }
  }

</style>
